<template>
	<div class="w-page">
		<!-- 头部 -->
		<Header navNum="8"></Header>
		<!-- 内容 -->
		<div class="conbox">
			<div class="w-width">
				<!-- 正文内容开始 -->
				<div class="w-cardbox">
					<div class="w-card flex hs vs">
						<!-- 左侧开始 -->
						<!-- 左侧结束 -->
						<div class="tabCon">
							<div class="w-tabtop flex hs vc">
								<img src="../assets/img/index/home.png" alt="" class="w-home">
								<el-breadcrumb separator-class="el-icon-arrow-right">
									<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
									<el-breadcrumb-item>{{columnName}}</el-breadcrumb-item>
									<el-breadcrumb-item v-if="title">{{title}}</el-breadcrumb-item>
								</el-breadcrumb>
							</div>
							<div class="w-mainhtml" v-if="isdetail==0">
								<div class="w-tabtitle">{{title}}</div>
								<div v-if="introList.length">
									<div class="w-con">
<!--										<CommonList :List="introList" @sendId='sendId'></CommonList>-->
                    <ul class="w-tabul" v-if="introList.length > 0">
                      <li v-for="(v, i) in introList" :key="i">
                        <div class="w-a flex hb vc">
                          <div class="flex hs vc">
                            <p class="dian shrink0"></p>
                            <p class="w-text ellipsis">{{ v.name }}</p>
                          </div>
                          <img src="../assets/img/download.png" alt="" @click="toDownload(v)">
                        </div>
                      </li>
                    </ul>
									</div>

                  <el-pagination @current-change="handleCurrentChange" :current-page.sync="page" :page-size="size" layout="total, prev, pager, next"
                                 :total="total">
                  </el-pagination>
								</div>
								<div v-else>
									<div class="w-con">暂无</div>
								</div>
							</div>
							<!-- 详情开始 -->
							<div class="w-detail" v-if="isdetail==1">
								<div class="w-tabtitle">下载中心</div>
								<div class="w-tabcon">
									<p>教育发展基金会项目管理文本资料</p>
									<p>附件【限定性项目管理文本表1—8(新表）.rar】 已下载88次</p>
								</div>
							</div>
							<!-- 详情结束 -->
						</div>
					</div>
				</div>
				<!-- 正文内容 结束 -->
			</div>
		</div>
		<!-- 底部开始 -->
		<Footer></Footer>
		<!-- 底部结束 -->
	</div>
</template>

<script>
import { downloadList } from "../api/download";

export default {
		data() {
			return {
				isdetail: 0,
				columnName: '下载中心',
				title: '',
				acBig: 1,
				menuList: [{
						id: 1,
						name: '教育发展基金会项目管理文本资料',
						ischildren: false,
					},
					{
						id: 2,
						name: '教育发展基金会捐赠协议书模版',
						ischildren: false,

					},
					{
						id: 3,
						name: '重社会捐赠项目冠名办法',
						ischildren: false,
					},
					{
						id: 4,
						name: '教育基金会学生活动预决算表',
						ischildren: false,
					},
					{
						id: 5,
						name: '教育基金会设备采购转账单',
						ischildren: false,
					}
				],
				introList: [],
        size: 10,
        page: 1,
        total: 0
			};
		},
		created() {
			this.out()
		},

    mounted() {
		  this.fetchList()
    },

    methods: {
		  // 获取下载列表
		  fetchList() {
        downloadList({
          size: this.size,
          page: this.page
        }).then(res => {
          this.introList = res.data.list
          this.total = res.data.total
        })
      },

      // 分页
      handleCurrentChange(currentPage) {
        this.page = currentPage;
        this.fetchList()
      },

      // 下载
      toDownload(item) {
		    window.open(item.url)
      },

			out(data) {
				if (data) {
					this.isdetail=0
					var data=JSON.parse(data)
					this.acBig = data.acBig
					this.menuList.forEach(item => {
						if (item.id == this.acBig) {
							this.title = item.name
						}
					});
				}

			},
			sendId(data) {
				if (data) {
					this.isdetail = 1
				}
			}
		}
	};
</script>
<style scoped>
  /* li */
  .w-tabul {
    margin-bottom: 30px;
    box-sizing: border-box;
    min-height: 24.5vh;
  }

  .w-tabul .w-a {
    border-bottom: 1PX dotted #999;
    font-size: 16px;
    color: #333333;
    padding: 18px 0 18px 9px;
    box-sizing: border-box;
  }

  .w-tabul .dian {
    width: 6px;
    height: 6px;
    background: rgba(102, 102, 102, 1);
    border-radius: 50%;
    margin-right: 13px;
  }

  .w-tabul img {
    width: 30px;
    cursor: pointer;
  }

  .w-text {
    /*width: 90%;*/
  }

  .el-pagination {
    text-align: center;
  }
</style>
<style scoped>
	.tabCon{
		min-height: 800px;
	}

	/* 详情 */
	.w-tabcon p {
		/* text-indent: 30px; */
		font-size: 16px;
		font-weight: 300;
		color: rgba(51, 51, 51, 1);
		line-height: 2;
		margin-bottom: 20px;
		text-align: justify;
	}

	.w-tabcon img {
		display: block;
		max-height: 334px;
		max-width: 420px;
		margin: 0 auto;
		margin-top: 30px;
		margin-bottom: 40px;
	}
</style>
<style scoped>
	/* 公共css */
	.w-card {
		background: #fff;
	}

	.w-card-left {
		width: 26%;
	}

	/* 右侧 */
	.w-home {
		width: 16px;
		display: block;
		height: 14px;
		margin-right: 15px;
	}

	.tabCon {
		padding: 35px 33px;
		box-sizing: border-box;
		width: 100%;
	}

	.w-tabtitle {
		margin-top: 39px;
		margin-bottom: 47px;
		font-size: 30px;
		color: rgba(51, 51, 51, 1);
		text-align: center;
		font-weight: 500;
	}

	.w-width {
		width: 70%;
		padding-top: 15px;
		margin: 0 auto;
	}

	.conbox {
		background: linear-gradient(#C9B99F, #fff);
		padding-bottom: 30px;
	}
</style>
<style>
	/* 面包屑 */
	.w-page .el-tabs--left .el-tabs__header.is-left {
		width: 26%;
	}

	.w-page .el-tabs--left .el-tabs__item.is-left {
		text-align: center;
		color: #333;
		font-size: 18px;
	}

	.w-page.el-breadcrumb__inner a:hover,
	.el-breadcrumb__inner.is-link:hover {
		color: #692324;
	}
</style>
